<!--
 * @author liganghao
 -->
<template>
  <div class="tree-con">
    <div class="search-tree-wrap">
      <el-row>
        <el-col :span="18">
          <el-input
            v-model.trim="treeName"
            style="width:90%"
            placeholder="组织名称搜索"
            class="search-input"
            clearable
            @clear="clearSearchTree"
          />
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="searchTree">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="orgTree">
      <el-tree
        v-if="!issearchtree"
        ref="qytree"
        key="lodTree"
        v-loading="treeLoading"
        :data="treeData"
        :props="defaultProps"
        :expand-on-click-node="false"
        class="dictTree"
        :highlight-current="ishighlight"
        node-key="id"
        :load="loadtree"
        lazy
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <!--          <span
            :class="['tag', data.type==='JGLX01'?'gh':data.type==='JGLX02'?'qy':data.type===''?'bm':'']"
          >{{ data.typeValue || '' }}</span>-->
        </span>
      </el-tree>
      <el-tree
        v-if="issearchtree"
        ref="qytree"
        key="newTree"
        v-loading="treeLoading"
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
        class="dictTree"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <!--          <span
            :class="['tag', data.type==='JGLX01'?'gh':data.type==='JGLX02'?'qy':data.type===''?'bm':'']"
          >{{ data.typeValue || '' }}</span>-->
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
import { getComAndOrgTree, getNewTreeData } from '@/views/roleuserallot/api/index'
export default {
  name: 'QyTree',
  props: {
    clickTree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      treeLoading: false,
      ishighlight: false,
      issearchtree: false,
      treeName: '',
      breadList: [],
      treeData: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      }
    }
  },

  created() {
    this.getTreeData()
  },
  methods: {
    /**
     *  机构搜索
    */
    searchTree() {
      if (!this.treeName) {
        this.getTreeData()
      } else {
        this.treeLoading = true
        return new Promise((resolve, reject) => {
          getNewTreeData({ name: this.treeName }).then(response => {
            this.treeData = response.data.data
            this.issearchtree = true
            this.treeLoading = false
          }).catch(error => {
            reject(error)
            this.issearchtree = false
            this.treeLoading = false
          })
        })
      }
    },

    /**
     * 清空搜索机构
     */
    clearSearchTree() {
      this.treeName = ''
      this.issearchtree = false
      this.searchTree()
    },

    getTreeData() {
      this.treeLoading = true
      return new Promise((resolve, reject) => {
        getComAndOrgTree().then(response => {
          this.treeLoading = false
          this.treeData = response.data.data
        }).catch(error => {
          reject(error)
          this.treeLoading = false
        })
      })
    },
    loadtree(node, resolve) {
      this.treeloading = true
      if (node.level !== 0) {
        if (node.data.deptId !== '') {
          getComAndOrgTree({ parentId: node.data.orgId, deptPId: node.data.deptId }).then(res => {
            this.treeloading = false
            resolve(res.data.data)
          }).catch(res => {
            this.treeloading = false
            resolve([])
          })
        } else {
          getComAndOrgTree({ parentId: node.data.id }).then(res => {
            this.treeloading = false
            resolve(res.data.data)
          }).catch(res => {
            this.treeloading = false
            resolve([])
          })
        }
      }
    },
    /**
     * 获取当前树节点和其父级节点
     */
    getTreeNode(Node) {
      if (Node) {
        if (Node.label !== undefined) {
          this.breadList.unshift(Node.label) // 在数组头部添加元素
          this.$emit('breadLists', this.breadList)
          this.getTreeNode(Node.parent) // 递归
        }
      }
    },
    handleNodeClick(data, Node) {
      this.breadList = []
      this.ishighlight = true
      this.getTreeNode(Node)
      this.$emit('clickTreeData', data)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" type="text/scss">
.tree-con {
  height: 78vh;
  overflow: auto;
  .el-tree-node__content {
    margin-top: 10px;
  }
  .search-tree-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tree-filter {
      padding: 10px 18px;
    }
    .el-button {
      padding: 10px;
    }
  }
  .tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 3px 4px;
    color: #fff;
    &.gh {
      color: #ff7474;
      border: 1px solid #ff7474;
    }
    &.qy {
      color: #2fbcfb;
      border: 1px solid #2fbcfb;
    }
    &.bm {
      color: #ffa11c;
      border: 1px solid #ffa11c;
    }
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-icon-caret-right:before {
    content: "\E7A0";
    font-size: 14px;
  }
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\E7A2";
    font-size: 14px;
  }
  .orgTree {
    .el-tree {
      min-width: 100%;
      font-size: 14px;
      display: inline-block;
    }
    .tree {
      overflow-y: auto;
      overflow-x: scroll;
      height: 500px;
      /*width:200px;*/
      border: 1px solid blue;
    }
  }
}
</style>

